<script>
import { mixinFetchEmp } from '@/mixin'

export default {
  name: 'Contract',
  mixins: [mixinFetchEmp]
}
</script>

<template>
  <div class="contract-container">
    <div class="header">员工列表</div>
    <el-table size="small" stripe border :data="records">
      <el-table-column prop="id" label="员工ID" align="center"></el-table-column>
      <el-table-column prop="name" label="员工姓名" align="center"></el-table-column>
      <el-table-column label="员工性别" align="center">
        <template #default="{row}">
          {{ row.sex === '1' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column label="账号状态" align="center">
        <template #default="{row}">
          <el-switch v-model="row.status" disabled :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" active-color="#13ce66"></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
  </div>
</template>

<style scoped lang="scss">
.contract-container {
  padding: 15px;
  background-color: #fff;

  .el-table {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
